<script setup>
import {Cell, CellGroup, NavBar, Toast, Icon, Button, Form, Field, Popup, Divider} from "vant";
import {ref} from "vue";
import axios from "axios";

const props = defineProps(['secretKey']);
const emit = defineEmits(["DirChoosed"]);
let nowPath = ["/"];
let now = ref("/");
let fileInfo = ref([]);
let dirInfo = ref([]);
let newDirFormShow = ref(false)
let newDirName = ref("")


async function getPath(s) {
  dirInfo.value = [];
  fileInfo.value = [];
  let res
  try {
    res = await reqForDirInfo(s)
  } catch (err) {
    if (err?.data === "非法访问") {
      Toast("非法访问！")
    } else {
      Toast("请求出错")
    }
    return
  }
  for (let i in res.data) {
    if (res.data[i].is_dir) {
      dirInfo.value.push(res.data[i]);
    } else {
      fileInfo.value.push(res.data[i]);
    }
  }
}

function reqForDirInfo(path) {
  let req = import.meta.env.VITE_APP_BASE_URL
      + "/path?aim="
      + path
      + "&key="
      + props["secretKey"]
  return new Promise((resolve, reject) => {
    axios.get(req)
        .then((res) => {
          resolve(res)
        }).catch(err => {
      reject(err.response)
    })
  })
}

function fileClicked(s) {
  nowPath.push(s);
  now.value = s;
  getPath(nowPath.join("/"));

}

function lastDir() {
  if (now.value === "/") {
    Toast("已经是根目录");
    return;
  }
  nowPath.pop();
  now.value = nowPath[nowPath.length - 1]
  getPath(nowPath.join("/"));
}

function nextStep() {
  emit("DirChoosed", nowPath.join("/"));
}

function createDirBtnOnClick() {
  newDirFormShow.value = true
}

async function onSubmit(value) {
  for (let i in dirInfo.value) {
    if (dirInfo.value[i].name === value.dirName) {
      Toast("文件夹已存在！")
      return
    }
  }
  let totalPath = nowPath.join("/") + "/" + value.dirName
  let url = import.meta.env.VITE_APP_BASE_URL + "/path/mkdir?dirname=" + totalPath
  try {
    await axios.get(url)
  } catch (e) {
    Toast("出错啦！")
    console.log(e)
  }
  await getPath(nowPath.join("/"));
  newDirFormShow.value = false
}

getPath("/");
</script>


<template>
  <NavBar
      :title="now"
      left-text="上一级"
      right-text="选择"
      @click-left="lastDir"
      @click-right="nextStep"
  />
  <CellGroup>
    <Cell
        v-for="(item,i) in dirInfo"
        :key="i"
        :value="item.name"
        @click="fileClicked(item.name)"
        is-link
    ></Cell>
    <Cell v-for="(item,i) in fileInfo"
          :key="i"
          :value="item.name"
          icon="orders-o"></Cell>
  </CellGroup>
  <div class="bottomWrapper">
    <Button
        type="success"
        @click="createDirBtnOnClick"
    >创建文件夹
    </Button>
  </div>
  <Popup
      v-model:show="newDirFormShow"
      position="top"
      close-icon-position="bottom-right"
      :style="{height:'25%'}"
      round
      closeable
  >
    <Divider/>
    <Form @submit="onSubmit">
      <Field
          name="dirName"
          label="文件夹名"
          placeholder="新文件夹名"
          v-model="newDirName"
          :rules="[{required: true, message: '请填写文件夹名'}]"
      />
      <div class="SubmitBtn">
        <Button
            type="primary"
            native-type="submit"
        >创建
        </Button>
      </div>
    </Form>
  </Popup>
</template>

<style scoped>
.bottomWrapper {
  width: 350px;
  position: fixed;
  bottom: 20px;
}
.SubmitBtn {
  margin-top: 25px;
}
</style>